.number-menu {
  display: flex;
  user-select: none;

  .nm-item {
    @extend %roboto;

    flex: 1 1 auto;
    color: $c-font;
    text-align: center;
    line-height: 1.4em;
    padding: 0.5em 5px;
    text-transform: capitalize;
    white-space: normal;
    font-size: 0.9em;

    &:hover {
      color: $c-link;
    }
  }

  &--tabs .nm-item {
    @extend %box-radius-top;

    margin-top: 0.7em;
    padding-bottom: 0.8em;

    @include transition;

    border-bottom: $border;

    &:first-child {
      border-top-left-radius: 0;
      border-left: 0 !important;
    }

    &:last-child {
      border-top-right-radius: 0;
      border-right: 0 !important;
    }

    &:hover {
      background: mix($c-link, $c-bg-box, 10%);
      color: $c-font-clear;
    }

    &.active {
      color: $c-font-clear;
      border: $border;
      border-bottom: 0;
      background: $c-bg-box;
    }
  }

  strong {
    font-weight: normal;
    font-size: 1.1em;
  }
}
